<!--
  道路偏移告警地图modal
  value:{
    id        :string(告警id),
    routeId   :string(线路id),
    alarmTime :string(YYYY-MM-DD HH:mm:ss)
  }
-->
<template>
  <Modal :value="show" @on-visible-change="changeModal" title="查看地图" width="900px" :footerHide="true">
    <div class="map-container">
      <div id="js_offset_map" style="width:100%;height:calc(70vh - 51px);"></div>
      <div class="map-absolute info-window">
        <Card :padding="10">
          <table class="infowindow-table">
            <tr v-for="(v,k,i) in tableData" :keys="`map-info-${i}`">
              <td class="label">{{k}}：</td>
              <td>{{v}}</td>
            </tr>
          </table>
        </Card>
      </div>
      <div class="map-absolute tip-window">
        <Card :padding="10">
          <table class="infowindow-table">
            <tr>
              <td><span class="actual"></span></td>
              <td>行驶轨迹</td>
              <td><span class="routes"></span></td>
              <td>规划线路</td>
            </tr>
          </table>
        </Card>
      </div>
    </div>

    <Spin size="large" fix v-if="isModalLoading"></Spin>
    <div slot="footer">
      <Button type="text" @click="closeModal">关闭</Button>
    </div>
  </Modal>
</template>

<style lang="less" scoped>
  .ivu-card{
    margin-top: 0;
  }
  .map-container{
    position: relative;margin: -15px;
    .map-absolute{
      position: absolute;
    }
    .info-window{
      top: 10px;right: 10px;
    }
    .tip-window{
      bottom: 10px;right: 10px;
      table{
        .actual{
          display: block;height: 10px;width: 90%;background-color: #02c2d7;
        }
        .routes{
          display: block;height: 10px;width: 90%;background-color: #909e9e;
        }
      }
    }
  }
  .infowindow-table {
    width:300px;
    td {
      padding: 3px 5px;
    }
    .label {
      width: 40%;text-align: right;vertical-align: top;
    }
  }
</style>

<script>
	import {mapState,mapActions,mapMutations} from 'vuex'
  import {post}  	    from '@/util/request'
  import moment       from 'moment'
  import Map          from '@/plugin/Map'
  import {getAddress} from '@/plugin/Map/Mapaddress'
  import MapRouter    from '@/plugin/Map/MapRouter'
  import alarmIcon        from '@/assets/images/mapIcons/alarm.png'

  let map, route;
  export default {
    props:['value','show'],
    mounted(){
      map = new Map('js_offset_map', {
          resizeEnable: true,
          zoom:11,
          center: [116.397428, 39.90923]
      });

      route = new MapRouter({map,zIndex: 100});
    },
    data(){
      return {
        isModalLoading:false,
        mapData:{},
        tableData:{}
      }
    },
    watch: {
      async mapData(v) {
        let routePoints = v.routeOffsetVoList.map(v => {
          return [v.lng, v.lat];
        });
        let actualPoints = v.actualGpsList.map(v => {
          return [v.lng, v.lat];
        });

        // 告警点
        let alarmPoint = [v.routeOffsetVo.lng, v.routeOffsetVo.lat];
        let alarmMarker = new AMap.Marker({
          map,position:alarmPoint,zIndex:102,title:'告警地点',
          icon: new AMap.Icon({image:alarmIcon,size:new AMap.Size(21,35),imageSize:new AMap.Size(21,35)})
        });

        let array = [v.routeOffsetVoList[0],v.routeOffsetVoList[v.routeOffsetVoList.length-1]]
        let addrs = await getAddress(array.map(a=>[a.lng,a.lat]));
        let data = {
          '车牌号'  :v.routeOffsetVo.plateNumber,
          '驾驶员'  :v.routeOffsetVo.driverName?v.routeOffsetVo.driverName+`(${v.routeOffsetVo.driverPhone||'--'})`:'--',
          '线路名称':v.routeOffsetVo.routeName,
          '起点':addrs[0].formattedAddress,
          '终点':addrs[1].formattedAddress,
          '告警地点':v.routeOffsetVo.address,
          '告警时间':v.routeOffsetVo.alarmTime
        };
        this.tableData = data;

        // 规划线路
        let routeData = [{
          name: `规划线路：${v.routeOffsetVo.routeName}`,
          path: routePoints
        },{
          name: '偏移行驶线路',
          path: actualPoints
        }];
        route.setData(routeData);

        // 标出规划线路的起点终点
        let sp = routePoints[0];
        let ep = routePoints[routePoints.length - 1];
        if (sp){
          route.setStart(sp);
        }
        if (ep){
          route.setEnd(ep);
        }
      }
    },
    computed:{
    },
    methods:{
      changeModal(v) {
        !v && map.clearMap();
        !v && route.setData([]);
        !v && this.closeModal();

        if (v && this.value) {
          let query = {...this.value};
          this.isModalLoading = true;
          post('/todo/carreteraOffset/demarcar', query).then(async res => {
            let alarm = res.data.data.routeOffsetVo;
            let adds = await getAddress([[alarm.lng,alarm.lat]]);
            alarm.address = adds.length ? adds[0].formattedAddress : '--';
            alarm.alarmTime = moment(alarm.createTime).format('YYYY-MM-DD HH:mm:ss');
            alarm.startTime = moment(alarm.actualStartime).format('YYYY-MM-DD HH:mm:ss');
            alarm.endTime   = alarm.actualEndTime ? moment(alarm.actualEndTime).format('YYYY-MM-DD HH:mm:ss') : '';
            this.mapData = res.data.data;
            this.isModalLoading = false;
          });
        }

      },
      closeModal() {
        this.$emit('close');
      }
    }
  };
</script>
